import G6 from '@antv/g6';
import { start, action, stop } from '../utils/icon';
import { ANCHORS, NODE } from '../utils/constants.js';
import { COLOR } from 'src/utils/color.js';
import { getWidth } from '../utils/utils';
const ICON_SIZE = 32;
const _w = 100;
const _h = 30;
const _w2 = 30;
const _h2 = 20;

const anchors = [
  { offsetX: ANCHORS[0]._X, offsetY: ANCHORS[0]._Y },
  { offsetX: ANCHORS[1]._X, offsetY: ANCHORS[1]._Y },
];

const cross_anchors = [{ offsetX: _w2, offsetY: 0 }, { offsetX: _w2, offsetY: _h }];

// start node
G6.registerNode(NODE._START, {
  draw(cfg, group) {
    const shape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: ICON_SIZE,
        height: ICON_SIZE,
        fill: 'transparent',
        stroke: 'transparent',
      },
    });
    group.addShape('image', {
      attrs: {
        img: start,
        width: ICON_SIZE,
        height: ICON_SIZE,
        x: 0,
        y: 0,
        cursor: 'pointer',
        action: 'play',
      },
    });
    this.drawAnchor(cfg, group);
    // 如果有其他信息other
    if (cfg.other) {
      group.addShape('rect', {
        attrs: {
          width: cfg.longer ? _w2 + 10 : _w2,
          height: _h2,
          x: cfg.longer ? ICON_SIZE - (_w2 + 10) / 2 : ICON_SIZE - _w2 / 2,
          y: -_h2 / 2,
          fill: COLOR[cfg.color],
          radius: 4,
          cursor: 'pointer',
        },
      });
      group.addShape('text', {
        attrs: {
          x: ICON_SIZE, // 居中
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.other,
          fill: COLOR._WHITE,
        },
      });
    }

    return shape;
  },

  drawAnchor(cfg, group) {
    // 绘制出锚点
    group.addShape('circle', {
      attrs: {
        x: ICON_SIZE / 2,
        y: 30,
        r: 5,
        fill: COLOR._WHITE,
        stroke: COLOR._BLACK,
        cursor: 'pointer',
        position: 'bottom',
      },
    });
  },

  // 响应状态变化
  setState(name, value, item) {
    const group = item.getContainer();

    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    if (name === 'active') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
        shape.attr('stroke', COLOR._GRAY);
      } else {
        shape.attr('fill', 'transparent');
        shape.attr('stroke', 'transparent');
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
        shape.attr('stroke', COLOR._GRAY);
      } else {
        shape.attr('fill', 'transparent');
        shape.attr('stroke', 'transparent');
      }
    }
  },
  getAnchorPoints() {
    return [
      [0.5, 1], // 下面中间
    ];
  },
});

// 普通 strategy node
G6.registerNode(NODE._STRATEGY, {
  draw(cfg, group) {
    const shape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: getWidth(cfg.label, _w),
        height: _h,
        fill: COLOR._WHITE,
        stroke: COLOR._BLACK,
      },
    });

    // 如果有label
    if (cfg.label) {
      group.addShape('text', {
        // attrs: style
        attrs: {
          x: getWidth(cfg.label, _w) / 2, // 居中
          y: _h / 2,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.label,
          fill: COLOR._BLACK,
        },
      });
    }

    // 如果有其他信息other
    if (cfg.other) {
      group.addShape('rect', {
        attrs: {
          width: cfg.longer ? _w2 + 10 : _w2,
          height: _h2,
          x: cfg.longer ? getWidth(cfg.label, _w) - (_w2 + 10) / 2 : getWidth(cfg.label, _w) - _w2 / 2,
          y: -_h2 / 2,
          fill: COLOR[cfg.color],
          radius: 4,
          cursor: 'pointer',
        },
      });
      group.addShape('text', {
        attrs: {
          x: getWidth(cfg.label, _w), // 居中
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.other,
          fill: COLOR._WHITE,
        },
      });
    }
    if (cfg.is_break) {
      group.addShape('image', {
        attrs: {
          img: stop,
          width: _h2,
          height: _h2,
          x: 0,
          y: (_h - _h2) / 2,
          cursor: 'pointer',
          action: 'play',
        },
      });
    }
    return shape;
  },
  afterDraw(cfg, group) {
    this.drawAnchor(cfg, group);
  },

  drawAnchor(cfg, group) {
    // 绘制出所有的锚点
    anchors.forEach((anchor, index) => {
      group.addShape('circle', {
        attrs: {
          x: getWidth(cfg.label, _w) / 2,
          y: anchor.offsetY,
          r: 5,
          fill: COLOR._WHITE,
          stroke: COLOR._BLACK,
          cursor: 'pointer',
          position: index === 1 ? 'bottom' : 'top',
        },
      });
    });
    // 如果状态是selected
    if (
      group._cfg &&
      group._cfg.item &&
      group._cfg.item._cfg &&
      group._cfg.item._cfg.states &&
      group._cfg.item._cfg.states.includes('selected') &&
      document.getElementById(cfg.id)
    ) {
      document.getElementById(cfg.id).style.left = cfg.x + getWidth(cfg.label, _w) + 'px';
    }
  },

  // 响应状态变化
  setState(name, value, item) {
    const group = item.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    if (name === 'active') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
      } else {
        shape.attr('fill', COLOR._WHITE);
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
      } else {
        shape.attr('fill', COLOR._WHITE);
      }
    }
  },
  getAnchorPoints() {
    return [
      [0.5, 0], // 上面中间
      [0.5, 1], // 下面中间
    ];
  },
});

// action node
G6.registerNode(NODE._ACTION, {
  draw(cfg, group) {
    const shape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: ICON_SIZE,
        height: ICON_SIZE,
        fill: 'transparent',
        stroke: 'transparent',
      },
    });

    group.addShape('image', {
      attrs: {
        img: action,
        width: ICON_SIZE,
        height: ICON_SIZE,
        x: 0,
        y: 0,
        cursor: 'pointer',
        action: 'play',
      },
    });
    this.drawAnchor(cfg, group);
    // 如果有其他信息other
    if (cfg.other) {
      group.addShape('rect', {
        attrs: {
          width: cfg.longer ? _w2 + 10 : _w2,
          height: _h2,
          x: cfg.longer ? ICON_SIZE - (_w2 + 10) / 2 : ICON_SIZE - _w2 / 2,
          y: -_h2 / 2,
          fill: COLOR[cfg.color],
          radius: 4,
          cursor: 'pointer',
        },
      });
      group.addShape('text', {
        attrs: {
          x: ICON_SIZE, // 居中
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.other,
          fill: COLOR._WHITE,
        },
      });
    }
    return shape;
  },

  drawAnchor(cfg, group) {
    // 绘制出所有的锚点
    cross_anchors.forEach((anchor, index) => {
      group.addShape('circle', {
        attrs: {
          x: anchor.offsetX / 2,
          y: anchor.offsetY,
          r: 5,
          fill: COLOR._WHITE,
          stroke: COLOR._BLACK,
          cursor: 'pointer',
          position: index === 1 ? 'bottom' : 'top',
        },
      });
    });
  },
  // 响应状态变化
  setState(name, value, item) {
    const group = item.getContainer();

    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    if (name === 'active') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
        shape.attr('stroke', COLOR._GRAY);
      } else {
        shape.attr('fill', 'transparent');
        shape.attr('stroke', 'transparent');
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
        shape.attr('stroke', COLOR._GRAY);
      } else {
        shape.attr('fill', 'transparent');
        shape.attr('stroke', 'transparent');
      }
    }
  },
  getAnchorPoints() {
    return [
      [0.5, 0], // 上面中间
      [0.5, 1], // 下面中间
    ];
  },
});

// challenge node
G6.registerNode(NODE._CHALLENGE, {
  draw(cfg, group) {
    const nodes = cfg.nodes;
    const rowLength = Math.ceil(nodes.length / 2);
    const width = getWidth(cfg.label, 2 * (_w + 10)) + 10;
    const height = rowLength * (_h + 12) + 24;
    const shape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: width,
        height: height,
        fill: COLOR._WHITE,
        stroke: COLOR._BLACK,
      },
    });

    // 如果有label
    if (cfg.label) {
      group.addShape('text', {
        attrs: {
          x: (getWidth(cfg.label, 2 * (_w + 10)) + 10) / 2, // 居中
          y: 10,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.label,
          fill: COLOR._BLACK,
        },
      });
    }

    // 如果有challenge
    if (nodes) {
      nodes.forEach((node, index) => {
        const _group = group.addGroup({ id: 'c_node' });
        const rowIndex = Math.ceil((index + 1) / 2);
        const x = (index + 1) % 2 === 0 ? _w + 20 : 10;
        const y = _h * (rowIndex - 1) + 12 * rowIndex + 12;
        _group.addShape('rect', {
          attrs: {
            x: x, // 居中
            y: y,
            width: _w,
            height: _h,
            fill: COLOR._WHITE,
            stroke: COLOR._BLACK,
          },
        });
        // 如果有label
        if (node.label) {
          _group.addShape('text', {
            // attrs: style
            attrs: {
              x: x + _w / 2, // 居中
              y: y + _h / 2,
              textAlign: 'center',
              textBaseline: 'middle',
              text: node.label,
              fill: COLOR._BLACK,
            },
          });
        }
        if (node.percent !== undefined) {
          _group.addShape('rect', {
            attrs: {
              width: _w2,
              height: 14,
              x: x + _w - 32,
              y: y - 8,
              fill: node.name === '冠军' ? COLOR._ORANGE : COLOR._GREEN,
              radius: 2,
              cursor: 'pointer',
            },
          });
          _group.addShape('text', {
            // attrs: style
            attrs: {
              x: x + _w - 17,
              y: y,
              textAlign: 'center',
              textBaseline: 'middle',
              text: node.percent + '%',
              fill: COLOR._WHITE,
              fontSize: 11,
            },
          });
        }

        // 如果有其他信息other
        if (node.other) {
          _group.addShape('rect', {
            attrs: {
              width: COLOR[cfg.color] === COLOR._WHITE ? _w2 + 20 : _w2,
              height: 14,
              x: x + _w - 32,
              y: y - 8,
              fill: COLOR[node.color],
              radius: 2,
              cursor: 'pointer',
            },
          });
          _group.addShape('text', {
            attrs: {
              x: x + _w - 17,
              y: y,
              textAlign: 'center',
              textBaseline: 'middle',
              text: node.other,
              fill: COLOR[node.color] === COLOR._WHITE ? COLOR._GRAY : COLOR._WHITE,
            },
          });
        }
      });
    }

    // 如果有其他信息other
    if (cfg.other) {
      group.addShape('rect', {
        attrs: {
          width: cfg.longer ? _w2 + 10 : _w2,
          height: _h2,
          x: cfg.longer ? width - (_w2 + 10) / 2 : width - _w2 / 2,
          y: -_h2 / 2,
          fill: COLOR[cfg.color],
          radius: 4,
          cursor: 'pointer',
        },
      });
      group.addShape('text', {
        attrs: {
          x: width, // 居中
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.other,
          fill: COLOR._WHITE,
        },
      });
    }
    return shape;
  },
  afterDraw(cfg, group) {
    this.drawAnchor(cfg, group);
  },
  drawAnchor(cfg, group) {
    const nodes = cfg.nodes;
    const _group = group.addGroup({ id: 'anchor' });
    const rowLength = Math.ceil(nodes.length / 2);
    const width = getWidth(cfg.label, 2 * (_w + 10)) + 10;
    const height = rowLength * (_h + 12) + 24;
    // 绘制出所有的锚点
    [1, 2].forEach((node, index) => {
      _group.addShape('circle', {
        attrs: {
          x: width / 2,
          y: index === 0 ? 0 : height,
          r: 5,
          fill: COLOR._WHITE,
          stroke: COLOR._BLACK,
          cursor: 'pointer',
          position: index === 1 ? 'bottom' : 'top',
          type: 'anchor',
        },
      });
    });
    // 如果状态是selected
    if (
      group._cfg &&
      group._cfg.item &&
      group._cfg.item._cfg &&
      group._cfg.item._cfg.states &&
      group._cfg.item._cfg.states.includes('selected') &&
      document.getElementById(cfg.id)
    ) {
      document.getElementById(cfg.id).style.left = cfg.x + width + 'px';
    }
  },
  // 响应状态变化
  setState(name, value, item) {
    const group = item.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    if (name === 'active') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
      } else {
        shape.attr('fill', COLOR._WHITE);
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('fill', COLOR._ACTIVE);
      } else {
        shape.attr('fill', COLOR._WHITE);
      }
    }
  },
  getAnchorPoints() {
    return [
      [0.5, 0], // 上面中间
      [0.5, 1], // 下面中间
    ];
  },
});
